import {useLoaderData} from "react-router-dom";
import Buttoninfo from "@/pages/profile/Buttoninfo.jsx";
import Inituser from "@/utils/Inituser.js"
import {useState} from "react";
import {useSelector} from "react-redux";
import ArticleList from "../../components/articleList.jsx"
import {useDispatch} from 'react-redux';
import {getFavoriteArticlesAction} from "@/store/actions/profilearticleAction.js"

export default function Profile() {
    const dispatch = useDispatch()
    // 作者信息
    const user = useLoaderData();
    const {username, bio, avatar, following} = user;
    if (!avatar) {
        Inituser(user);
    }
    // 我的·文章和喜欢文章切换
    const [tab, setTab] = useState(1);


    return (
        <div className="profile-page">
            <div className="user-info">
                <div className="container page">
                    <div className="row">
                        <div className="col-md-10 col-xs-12 offset-md-1">
                            {/*    头像*/}
                            <img src={avatar}
                                 alt=""/>
                            <h4>{username || ""}</h4>
                            <p>{bio || ""}</p>
                            {/*    编辑和设置*/}
                            <Buttoninfo username={username} following={following}/>
                        </div>
                    </div>
                </div>
            </div>
            <div className="container">
                <div className="row">
                    <div className="col-md-10 col-xs-12 offset-md-1">
                        <div className="articles-toggle">
                            <ul className="nav nav-pills outline-active">
                                <li className="nav-item">
                                    <span
                                        className={tab === 1 ? "nav-link active" : "nav-link"}
                                        onClick={() => {
                                            setTab(1);
                                        }}>我的文章</span></li>
                                <li className="nav-item">
                                    <span
                                        className={tab === 2 ? "nav-link active" : "nav-link"}
                                        onClick={() => {
                                            console.log(2)
                                            setTab(2);
                                            dispatch(getFavoriteArticlesAction(username, 1))
                                        }}>喜欢文章</span></li>
                            </ul>
                        </div>
                        {/*    文章列表*/}
                        <ArticleList/>
                    </div>
                </div>
            </div>
        </div>
    )
}